<template>
  <div id="newsCenter">
    <div class="head">
      <headerTitle>
        <div slot="headText" class="headText">消息</div>
        <div slot="leftIcon" class="leftIcon">
          <img src="../../assets/img/left_icon.png" alt="" class="leftIcon" />
        </div>
      </headerTitle>
    </div>
    <div class="contentBox">
      <div class="newsBox">
        <ul class="newsList">
          <li class="newsLi" v-for="(item, idx) in newsList" :key="idx">
            <div class="flexBox">
              <img :src="item.imgPath" alt="" />
              <span class="text">{{ item.text }}</span>
            </div>
            <span v-if="item.count > 0" class="count">{{ item.count }}</span>
          </li>
        </ul>
      </div>
      <div class="newsBox">
        <ul class="newsList">
          <li class="newsLi" v-for="(item, idx) in newsList2" :key="idx">
            <div class="flexBox">
              <img :src="item.imgPath" alt="" />
              <span class="text">{{ item.text }}</span>
            </div>
            <span v-if="parseInt(item.count) > 0" class="count">{{ item.count }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import headerTitle from "../../components/header";
export default {
  data() {
    return {
      newsList: [
        {
          text: "物流消息",
          imgPath: require("../../assets/img/wuliu.png"),
          count: 4,
        },
        {
          text: "通知消息",
          imgPath: require("../../assets/img/tongzhi.png"),
          count: 34,
        },
        {
          text: "客服消息",
          imgPath: require("../../assets/img/kefu.png"),
          count: 0,
        },
      ],
      newsList2: [
        {
          text: "收到的评论",
          imgPath: require("../../assets/img/pinglun.png"),
          count: '99+',
        },
        {
          text: "获赞与收藏",
          imgPath: require("../../assets/img/shouchang.png"),
          count: 0,
        },
        {
          text: "新朋友",
          imgPath: require("../../assets/img/newfriend.png"),
          count: 0,
        },
      ],
    };
  },
  components: {
    headerTitle,
  },
  methods:{
      
  }
};
</script>
<style lang="less" scoped>
#newsCenter {
  background: #f5f5f5;
  padding-bottom: 2rem;
  .head {
    position: relative;
    .headText {
      position: absolute;
      font-size: 0.17rem;
      color: white;
      top: 0.1rem;
      left: 1.71rem;
    }
    .leftIcon {
      width: 0.16rem;
      height: 0.16rem;
      position: absolute;
      left: 0.08rem;
      top: 0.08rem;
    }
  }
  .contentBox {
    margin: 0 0.16rem;
    .newsBox {
      background: #ffffff;
      padding: 0.1rem 0 0.12rem;
      margin-top: 0.18rem;
      .newsList {
        .newsLi:nth-child(1) {
          margin-top: 0;
        }
        .newsLi {
          display: flex;
          justify-content: space-between;
          padding-bottom: 0.12rem;
          border-bottom: 0.01rem solid #f5f5f5;
          margin-top: 0.1rem;
          .flexBox {
            display: flex;
            .text {
              font-size: 0.14rem;
              font-weight: bold;
              margin: 0.1rem 0 0 0.08rem;
            }
            img {
              width: 0.4rem;
              height: 0.4rem;
            }
          }
          .count {
            display: inline-block;
            height: 0.16rem;
            padding: 0 0.05rem;
            font-size: 0.1rem;
            font-weight: bold;
            color: #f5f5f5;
            border-radius: 0.1rem;
            background: #e42121;
            line-height: 0.16rem;
            text-align: center;
            margin: 0.09rem 0.15rem 0 0;
          }
        }
      }
    }
  }
}
</style>
